<!-- 
@name: 首页
-->
<template>
	<div id="search" class="page">
		<div class="searchWrap">
			<form action="/">
				<van-search v-model="searchValue" show-action placeholder="搜索一下" @click-input='clearSearch' @search="onSearch" @cancel="onCancel" />
			</form>
		</div>
		<div class="searchHistory" v-if="!searchValue">
			<div class="flex-between">
				<div class="text1">历史搜索</div>
				<div @click="clear_searchHistoryList"><img src="../../assets/images/delete.png" alt=""></div>
			</div>
			<div class="">
				<div class="text2 " @click="selectKeyWord(item.keyword)" v-for="(item,index) in searchHistoryList" :key="index">
					{{item.keyword}}
				</div>
			</div>
		</div>
		<div class="content-wrap" v-if="searchValue">
			<van-tabs v-model="activeName" color='#FFCE17' @click="onClick">
				<van-tab title="商品"></van-tab>
				<van-tab title="商店"></van-tab>
			</van-tabs>
			<div class="diy-area" v-if="activeName == 0">
				<div class="like">
					<div class="type2">
						<van-list v-model="loading" offset='0' :finished="finished" finished-text="没有更多了" @load="onLoad">
							<div @click="goCouponDetail(goodsItem.pkey)" class="item flex-row flex-center" v-for="(goodsItem, goodsIndex) in likeList" :key="goodsIndex">
								<img object-fit="fill" class="img1" :src="goodsItem.photo[0]"></img>
								<div style="flex:1">
									<div class="text1">{{goodsItem.name}}</div>
									<div class="flex-row flex-alignCenter">
										<div class="text3">{{goodsItem.applauseRate}}%好评</div>
										<div class="text4">距您{{(goodsItem.distance/1000).toFixed(1)}}km</div>
										<div class="text4" v-if="goodsItem.showType&&goodsItem.showType.indexOf('显示销量') !=-1">已售{{goodsItem.xsNumTotal}}</div>
									</div>
									<div class="vipSuctract flex-row" v-if="goodsItem.vipDiscount">
										<div class="left">会员</div>
										<div class="right">立减{{goodsItem.vipDiscount}}元</div>
									</div>
									<div class="flex-between flex-alignCenter">
										<div class="flex-row flex-alignCenter">
											<div class="text2" v-if="goodsItem.priceAmt">
												<span style="font-size:0.22rem">￥</span>{{goodsItem.priceAmt}}
												<span class="minText2" v-if="!goodsItem.pricePv">起</span>
											</div>
											<div class="text2 flex-row flex-alignCenter" v-if="goodsItem.pricePv">
												<span style="margin:0 0.06rem" v-if="goodsItem.priceAmt&&goodsItem.pricePv">+</span>
												<img object-fit="fill" class="jf2" src="@/assets/images/jf2.png"></img>
												{{goodsItem.pricePv}}
												<span class="minText">起</span>
											</div>
										</div>
										<div>
											<van-button class="button">立即购买</van-button>
										</div>
									</div>
								</div>
							</div>
						</van-list>
					</div>
				</div>
			</div>
			<div class="diy-area" v-if="activeName == 1">
				<div class="like">
					<div class="type2">
						<van-list v-model="loading" offset='0' :finished="finished" finished-text="没有更多了" @load="onLoad">
							<div @click="goVendorDetail(goodsItem.pkey)" class="item flex-row flex-center" v-for="(goodsItem, goodsIndex) in likeList" :key="goodsIndex">
								<img class="img1" object-fit="fill" :src="goodsItem.photo[0]"></img>
								<div style="flex:1">
									<div class="text1">{{goodsItem.name}}</div>
									<div class="flex-row flex-alignCenter">
										<van-rate readonly v-model="goodsItem.avgScore||0" allow-half :icon="$store.state.rateIcon" :void-icon="$store.state.rateIcon2" />
										<div style="color:#D95954;margin-left:0.1rem;margin-bottom:0.1rem">{{goodsItem.avgScore?goodsItem.avgScore.toFixed(1):0}}</div>
									</div>
									<div class="flex-row flex-alignCenter">
										<div class="text3">{{goodsItem.gtypeList[0]}}</div>
										<div class="text4">距您{{(goodsItem.distance/1000).toFixed(1)}}km</div>
										<div class="text4" v-if="goodsItem.showType&&goodsItem.showType.indexOf('显示销量') !=-1">已售{{goodsItem.xsNumTotal}}</div>
									</div>
									<div class="flex-between flex-alignCenter" style="margin-top: 0.2rem;">
										<div class="text4">
											{{goodsItem.addr}} </div>
										<div>
										</div>
									</div>
								</div>
							</div>
						</van-list>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'app',
	components: {},
	data() {
		return {
			searchValue: '',
			loading: false,
			finished: false,
			searchData: {
				page: 0,
				pagesize: 5,
			},
			searchHistoryList: [],
			likeList: [],
			activeName: 0,
		};
	},

	created() {
		this.search_index();
		this.searchData.lat = this.$store.state.lat;
		this.searchData.lng = this.$store.state.lng;
	},
	methods: {
		goVendorDetail(pkey) {
			// console.log()
			this.$router.push({
				path: '/vendor/detail',
				query: { pkey: pkey },
			});
		},
		goCouponDetail(pkey) {
			// console.log()
			this.$router.push({
				path: '/coupon/detail',
				query: { pkey: pkey },
			});
		},
		selectKeyWord(keyword) {
			this.searchValue = keyword;
			this.searchData.title = keyword;
			this.clearSearch();
			this.selectApi();
		},
		onClick() {
			this.clearSearch();
			this.finished = true;
			this.selectApi(true);
		},
		clear_searchHistoryList() {
			this.$myApi.clear_index().then((res) => {
				if (res.code == 0) {
					this.$notify({ type: 'success', message: '操作成功' });
					this.search_index();
				} else {
				}
			});
		},
		search_index() {
			var params = {};
			this.$myApi.search_index(params).then((res) => {
				if (res.code == 0) {
					this.searchHistoryList = res.result.lines;
				} else {
				}
			});
		},
		query_vendor(finished) {
			var params = this.searchData;
			params.name = params.title;

			this.$myApi.query_vendor(params).then((res) => {
				if (res.code == 0) {
					this.likeList = [...this.likeList, ...res.result.content];
					this.loading = false;
					this.searchData.page++;
					if (finished) {
						this.finished = false;
					}
					if (res.result.content.length < 5) {
						this.finished = true;
					}
				} else {
				}
			});
		},
		query_goods(finished) {
			// finished 避免清空列表出发刷新
			var params = this.searchData;
			this.$myApi.query_goods(params).then((res) => {
				if (res.code == 0) {
					this.likeList = [...this.likeList, ...res.result.content];
					this.loading = false;
					this.searchData.page++;
					if (finished) {
						this.finished = false;
					}
					if (res.result.content.length < 5) {
						this.finished = true;
					}
				} else {
				}
			});
		},
		clearSearch() {
			this.likeList = [];
			this.searchData.page = 0;
			this.searchData.pagesize = 5;
		},
		onSearch(e) {
			console.log(e);
			this.clearSearch();
			this.searchData.title = e;
			this.finished = true;
			this.selectApi(true);
			this.search_index();
		},
		selectApi(istrue) {
			if (this.activeName == 0) {
				this.query_goods(istrue);
			} else {
				this.query_vendor(istrue);
			}
		},
		onLoad() {
			console.log('触底');
			this.selectApi();
		},
		onCancel() {
			this.$router.back();
		},
	},
};
</script>
<style lang="less">
#search {
	padding-left: 0rem;
	padding-right: 0rem;
	min-height: 100vh;
	background-color: #fafafa;

	.van-swipe__indicators {
		bottom: 25px;
	}
	.van-search__content {
		border-radius: 20px;
	}
	.searchWrap {
		width: 100%;
	}
	.searchHistory {
		padding: 0.25rem;
		img {
			height: 0.3rem;
			width: 0.3rem;
		}
		.text1 {
			font-size: 0.28rem;
			font-weight: bold;
			color: #333333;
			margin-bottom: 0.2rem;
		}
		.text2 {
			background: #f5f5f5;
			border-radius: 10px;
			padding: 0.2rem;
			margin-right: 0.12rem;
			margin-bottom: 0.12rem;
			white-space: nowrap;
			display: inline-block;
			font-size: 0.26rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}
	.content-wrap {
		width: 100%;
		height: auto;
		.diy-area {
			// background-color: #fff;
			position: relative;
			background-color: inherit;

			img {
				vertical-align: top;
			}

			.banner {
				.bannerImg {
					height: 4rem;
					width: 100%;
				}
			}
			.br {
				height: 0.2rem;
				width: 100%;
				background: #fafafa;
			}
			.likeTitle {
				font-size: 0.32rem;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
				margin-bottom: 0.24rem;
				text-align: center;
			}
			.like {
				padding: 0.24rem;
				min-height: 3.84rem;
				// max-height: 200px;
				position: relative;

				box-sizing: border-box;
				border-radius: 10px;
					.button {
					background: #eca73b;
					border-radius: 20px;
					font-size: 0.22rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
					padding: 0.1rem 0.2rem;
					height: auto;
				}
				.type2 {
					width: 100%;
					overflow-x: scroll;
					.img1 {
						height: 1.8rem;
						width: 1.8rem;
						margin-right: 0.24rem;
						border-radius: 10px;
					}
					.item {
						margin-bottom: 8px;
						background: #fff;
						padding: 0.24rem;
						border-radius: 10px;
						.text1 {
							font-size: 0.3rem;
							font-family: PingFang SC;
							font-weight: bold;
							color: #000000;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							margin-bottom: 0.2rem;
						}
						.text2 {
							margin-top: 0.2rem;
							font-size: 0.32rem;
							font-weight: bold;
							color: #d95954;
						}
						.text3 {
							background: rgba(255, 212, 49, 0.12);
							border-radius: 2px;
							font-size: 0.24rem;
							font-family: PingFang SC;
							font-weight: bold;
							color: #d95954;
							padding: 0.07rem 0.17rem;
							margin-right: 0.23rem;
						}
						.text4 {
							font-size: 0.22rem;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							margin-right: 0.23rem;
						}
					}
				}
			}
			.iconWrap {
				position: relative;
				padding-bottom: 0.55rem;
				border-radius: 20px 20px 0 0;
				top: -0.3rem;
				// margin-top: -0.4rem;
				background-color: #fafafa;
				z-index: 999;
				display: grid;
				grid-template-columns: repeat(4, 25%);
				.iconImg {
					width: 0.8rem;
					height: 0.8rem;
					margin-bottom: 0.12rem;
				}
				.item {
					-webkit-box-flex: 1;
					flex: 1;
					margin-top: 0.3rem;
					font-size: 0.24rem;
					text-align: center;
				}
			}
		}
	}
}
</style>
<style lang="less" scoped>
/deep/.van-tab {
	flex: 0 1 auto;
	width: 1rem;
	font-size: 0.3rem;
}
/deep/.van-tab--active {
	font-weight: bold;
	font-size: 0.32rem;
}
</style>